<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    title="Drawer Title"
    width="50%"
  >
    <div>
      <BasicForm @register="registerForm" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { BasicForm, FormSchema, useForm } from "@/components/Form";

const schemas: FormSchema[] = [
  {
    field: "field1",
    component: "Input",
    label: "字段1",
    colProps: {
      span: 12,
    },
    defaultValue: "111",
  },
  {
    field: "field2",
    component: "Input",
    label: "字段2",
    colProps: {
      span: 12,
    },
  },
];
const [registerForm, { setFieldsValue }] = useForm({
  labelWidth: 120,
  schemas,
  showActionButtonGroup: false,
  actionColOptions: {
    span: 24,
  },
});
const [register] = useDrawerInner((data) => {
  // 方式1
  setFieldsValue({
    field2: data.data,
    field1: data.info,
  });
});
</script>
